<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div>
      <div>
        <Upload
          :loading="uploadLoading"
          :before-upload="handleBeforeUpload"
          action="http://qstb.mzj.shenyang.gov.cn"
          type="drag">
          <div class="upload-tip">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>请导入.xls或.xlsx格式的Excel</p>
            <Button type="primary" @click.stop="importTableData1" :disabled="upDisabled" style="margin-bottom: 8px" :loading="buttinLodading">开始上传</Button>
            <div>
              共计：{{tableData.length}} 条 | 成功：{{successNum}} 条 | 失败：{{failNum}} 条
            </div>
          </div>
        </Upload>
      </div>
      <a :href="fail_url" v-if="failNum > 0">
        <div class="failDiv" v-if="fail_url !== ''">
          <img :src="failImg" alt="">
          下载批量导入失败数据</div>
      </a>
    </div>
  </div>
</template>

<script>
import failImg from '@/assets/images/失败图标.png'
import excel from '@/libs/excel'
import isNaN from 'xe-utils/methods'
import { createWorkForceInfo } from '../../../api/eventlist'

export default {
  name: 'dq-excel',
  // props: {
  //   columns: Array,
  //   url: String,
  //   failedUrl: String
  // },
  data () {
    return {
      upDisabled: false,
      fail_url: '',
      failImg,
      buttinLodading: false,
      showTableColumn: false,
      tableData: [],
      file: null,
      uploadLoading: false,
      tableLoading: false,
      tableShow: true,
      schedule: 0,
      index: 0,
      successNum: 0,
      failNum: 0,
      failedColumns: [
        {
          type: 'index',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'cardno'
        },
        {
          title: '错误原因',
          key: 'message'
        },
        {
          title: '导入时间',
          key: 'create_time'
        }
      ],
      failedData: [],
      modal: false,
      formdata: new FormData()
    }
  },
  methods: {
    // 上传 excel
    handleBeforeUpload (file) {
      // this.upDisabled = false
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.tableData = []
        this.readFile(file)
        // this.getBase64(file)
        this.file = file
        console.log(file)
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    // 处理解析上传数据
    readFile (file) {
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadstart = e => {
        this.uploadLoading = true
        this.tableLoading = true
      }
      reader.onerror = e => {
        this.$Message.error('文件读取出错')
      }
      reader.onload = e => {
        this.$Message.info('文件读取成功')
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        console.log(header)
        let resultData = this.$common.xeUtils.clone(results)
        this.tableData = resultData
        console.log(this.tableData, 'this.tableDatathis.tableData')
        // this.importTableData1(file)
        // this.upDisabled = false
        this.successNum = 0
        this.failNum = 0
        this.uploadLoading = false
        this.tableLoading = false
      }
    },
    importTableData1 (file) {
      this.buttinLodading = true
      // this.upDisabled = true
      let formdata = new FormData()
      formdata.append('file', this.file)
      formdata.append('fileName', this.file.name)
      createWorkForceInfo(formdata).then(ret => {
        if (ret.data.errcode === 0) {
          this.successNum = 0
          this.failNum = ret.data.data.fail_num
          this.successNum = this.tableData.length - this.failNum
          this.fail_url = ret.data.data.url
          this.buttinLodading = false
          // this.schedule = this.GetPercent(this.successNum, this.tableData.length)
          // console.log(ret, '$$$$$$%%%%')
          return
        }
        this.$Notice.error({
          title: '失败提示',
          desc: ret.data.errmsg
        })
      })
    },
    // 进度条技术
    GetPercent (num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : (Math.round(num / total * 10000) / 100.00)
    },
    uuid () {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    }
  }
  // watch: {
  //   schedule (val) {
  //     if (val === 100) {
  //       this.$nextTick(function () {
  //         this.tableShow = true
  //       })
  //     }
  //   }
  // }
}
</script>

<style scoped>
  .failDiv {
    color: #B40001;
    text-align: center;
    margin-top:10px;
    cursor: pointer;
  }
  .failDiv img {
    width: 15px;
    height: 15px;
  }
</style>
